<template>
	<view style="padding-bottom: 100rpx;">
		<view class="" style="font-weight: 700;text-align:center;margin: 32rpx;font-size: 40rpx;">
			青联委员在促进青少年有序政治参与工作中的作用与问题研究调查问卷
		</view>
		<view class="" style="font-weight: 700;margin: 32rpx;margin-bottom: 0;font-family:KaiTi;">
			青年朋友：
		</view>
		<view class="" style="font-weight: 700;text-indent: 2em;margin: 32rpx;margin-top: 0;font-family:KaiTi;">
			您好！为了解青联委员在促进青少年有序政治参与工作中的作用与问题，市青联秘书处邀请您参与我们的问卷调查。请将答案序号填入括号或横线内。本次调查结果不会以个案形式对外公布，对于您的回答我们将严格保密。感谢您的大力支持！
		</view>
		<!-- 题目 -->
		<u--form labelPosition="left" :model="formData" ref="uForm" :rules="rules">
			<u-form-item prop="one">
				<view class="header">
					1.性别
				</view>
				<u-radio-group v-model="formData.one" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist1" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="two">
				<view class="header">
					2.民族
				</view>
				<u-radio-group v-model="formData.two" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist2" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="three" borderBottom="">
				<view class="header">
					3.年龄
				</view>
				<u--input v-model="formData.three" disabledColor="#ffffff" placeholder="周岁" border="none"></u--input>
			</u-form-item>
			<u-form-item prop="four">
				<view class="header">
					4.教育水平
				</view>
				<u-radio-group v-model="formData.four" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist4" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="five">
				<view class="header">
					5.政治面貌
				</view>
				<u-radio-group v-model="formData.five" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist5" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							民主党派具体为
						</view>
						<u--input v-model="formData.fiveText" disabledColor="#ffffff" border="bottom"></u--input>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="six">
				<view class="header">
					6.您目前从事的职业是
				</view>
				<u-radio-group v-model="formData.six" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist6" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="seven">
				<view class="header">
					7.您是否担任人大代表
				</view>
				<u-radio-group v-model="formData.seven" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							具体为
						</view>
						<u--input v-model="formData.sevenText" disabledColor="#ffffff" border="bottom"></u--input>
						<view class="" style="line-height: 50rpx;">
							人大代表(省级，市级，县级)
						</view>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="eight">
				<view class="header">
					8.您是否担任政协委员
				</view>
				<u-radio-group v-model="formData.eight" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							具体为
						</view>
						<u--input v-model="formData.eightText" disabledColor="#ffffff" border="bottom"></u--input>
						<view class="" style="line-height: 50rpx;">
							政协委员(省级，市级，县级)
						</view>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="nine">
				<view class="header">
					9.您是否有其他社会兼职
				</view>
				<u-radio-group v-model="formData.nine" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							具体为
						</view>
						<u--input v-model="formData.nineText" disabledColor="#ffffff" border="bottom"></u--input>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="ten">
				<template>
					<view class="header" style="display: flex;height: 50rpx;font-size: 24rpx;">
						<view class="" style="line-height: 50rpx;">
							10.2022年您提交人大建议，政协提案或社情民意
						</view>
						<u--input v-model="formData.ten" disabledColor="#ffffff" border="bottom"></u--input>
						<view class="" style="line-height: 50rpx;">
							份
						</view>
					</view>
				</template>
				<view class="header">
					具体名称是
				</view>
				<u--textarea v-model="formData.tenText" placeholder="请输入内容"></u--textarea>
			</u-form-item>
			<u-form-item prop="eleven">
				<view class="header">
					11.近年来，您提交人大建议或政协提案是否征求青年或青联委员意见
				</view>
				<u-radio-group v-model="formData.eleven" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="twelve">
				<view class="header">
					12.近年来，您有没有提交关于青年方面的人大建议或政协提案
				</view>
				<u-radio-group v-model="formData.twelve" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="thirteen">
				<view class="header">
					13.您是否参加过“共青团与人大代表，政协委员面对面”
				</view>
				<u-radio-group v-model="formData.thirteen" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist7" :key="index"
						:label="item.text" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="fourteen">
				<view class="header">
					14.现阶段，您认为青年应得到来自青联组织哪些方面帮助（可多选）
				</view>
				<u-checkbox-group v-model="formData.fourteen" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist14" :key="index"
						:label="item.text" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item prop="fifteen">
				<view class="header">
					15.你认为，现阶段，青联组织从哪些方面_____开展围绕中心、服务大局工作（可多选）
				</view>
				<u-checkbox-group v-model="formData.fifteen" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist15" :key="index"
						:label="item.text" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							其他
						</view>
						<u--input v-model="formData.fifteenText" disabledColor="#ffffff" border="bottom"></u--input>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="sixteen">
				<view class="header">
					16.有的小伙伴有时候不愿意参与青联活动，您认为主要原因在于（可多选）
				</view>
				<u-checkbox-group v-model="formData.sixteen" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist16" :key="index"
						:label="item.text" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item prop="seventeen">
				<view class="header">
					17.您愿意参加哪种类型的活动（可多选）
				</view>
				<u-checkbox-group v-model="formData.seventeen" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist17" :key="index"
						:label="item.text" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							其他
						</view>
						<u--input v-model="formData.seventeenText" disabledColor="#ffffff" border="bottom"></u--input>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="eighteen">
				<view class="header">
					18.您愿意为青联组织开展活动提供哪些方面的帮助或支持？（可多选）
				</view>
				<u-checkbox-group v-model="formData.eighteen" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item,index) in radiolist18" :key="index"
						:label="item.text" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
				<template>
					<view class="" style="display: flex;height: 50rpx;">
						<view class="" style="line-height: 50rpx;">
							其他
						</view>
						<u--input v-model="formData.eighteenText" disabledColor="#ffffff" border="bottom"></u--input>
					</view>
				</template>
			</u-form-item>
			<u-form-item prop="nineteen" class="nineteen">
				<view class="header">
					19.对青联组织促进青少年有序政治参与工作您有哪些方面意见建议？
				</view>
				<u--textarea v-model="formData.nineteen" placeholder="请输入内容"></u--textarea>
			</u-form-item>
		</u--form>
		<view class="button" @click="button">
			提交
		</view>
	</view>
</template>

<script>
	import formItem from '../../../uni_modules/uview-ui/libs/config/props/formItem';
	export default {
		data() {
			return {
				formData: {
					one: '',
					two: '',
					three: '',
					four: '',
					five: '',
					fiveText: '',
					six: '',
					seven: '',
					sevenText: '',
					eight: '',
					eightText: '',
					nine: '',
					nineText: '',
					ten: '',
					tenText: '',
					eleven: '',
					twelve: '',
					thirteen: '',
					fourteen: '',
					fifteen: '',
					fifteenText: '',
					sixteen: '',
					seventeen: '',
					seventeenText: '',
					eighteen: '',
					eighteenText: '',
					nineteen: ''
				},
				radiolist1: [{
					text: '男',
					value: '1'
				}, {
					text: '女',
					value: '2'
				}],
				radiolist2: [{
					text: '汉族',
					value: '1'
				}, {
					text: '少数民族',
					value: '2'
				}],
				radiolist4: [{
					text: '初中及以下',
					value: '1'
				}, {
					text: '高中(含高职高专)',
					value: '2'
				}, {
					text: '大学(含大专，本科)',
					value: '3'
				}, {
					text: '研究生及以上',
					value: '4'
				}],
				radiolist5: [{
					text: '中共党员',
					value: '1'
				}, {
					text: '共青团员',
					value: '2'
				}, {
					text: '民主党派',
					value: '3'
				}, {
					text: '无党派人士',
					value: '4'
				}, {
					text: '群众',
					value: '5'
				}],
				radiolist6: [{
					text: '国家机关，党群组织，企业单位负责人',
					value: '1'
				}, {
					text: '专业技术人员',
					value: '2'
				}, {
					text: '商业，服务业人员',
					value: '3'
				}, {
					text: '农，林，牧，渔，水利业生产人员',
					value: '4'
				}, {
					text: '生产，运输设备操作人员及有关人员',
					value: '5'
				}, {
					text: '其他从业人员',
					value: '6'
				}],
				radiolist7: [{
					text: '否',
					value: '1'
				}, {
					text: '是',
					value: '2'
				}],
				radiolist14: [{
					text: '学习提高',
					value: '1'
				}, {
					text: '思想进步',
					value: '2'
				}, {
					text: '青年主题活动',
					value: '3'
				}, {
					text: '法律援助',
					value: '4'
				}, {
					text: '职业技能培训',
					value: '5'
				}, {
					text: '人际交流',
					value: '6'
				}, {
					text: '婚恋女友',
					value: '7'
				}, {
					text: '其他',
					value: '8'
				}],
				radiolist15: [{
					text: '俩化一推',
					value: '1'
				}, {
					text: '双招双引',
					value: '2'
				}, {
					text: '就业创业',
					value: '3'
				}, {
					text: '乡村振兴',
					value: '4'
				}, {
					text: '社会治理',
					value: '5'
				}, {
					text: '文明创建',
					value: '6'
				}],
				radiolist16: [{
					text: '人微言轻，没效果',
					value: '1'
				}, {
					text: '参与能力不足',
					value: '2'
				}, {
					text: '没有参与渠道',
					value: '3'
				}, {
					text: '不感兴趣',
					value: '4'
				}, {
					text: '没有参与空间',
					value: '5'
				}, {
					text: '很忙，没有时间',
					value: '6'
				}],
				radiolist17: [{
					text: '文化教育类',
					value: '1'
				}, {
					text: '就业服务类',
					value: '2'
				}, {
					text: '养老服务类',
					value: '3'
				}, {
					text: '环保宣传类',
					value: '4'
				}, {
					text: '兴趣爱好类',
					value: '5'
				}],
				radiolist18: [{
					text: '资金',
					value: '1'
				}, {
					text: '场地',
					value: '2'
				}, {
					text: '活动策划',
					value: '3'
				}],
				rules: {
					one: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					two: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					three: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					four: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					five: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					six: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					seven: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					eight: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					nine: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					ten: [{
						required: true,
						message: '请填写',
						trigger: ['blur', 'change']
					}],
					eleven: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					twelve: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					thirteen: [{
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					fourteen: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					fifteen: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					sixteen: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					seventeen: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					eighteen: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}],
					nineteen: [{
						required: true,
						message: '请填写',
						trigger: ['blur', 'change']
					}],
				},
			};
		},
		methods: {
			groupChange(e) {
				
			},
			checkboxChange(n) {
				
			},
			button() {
				this.$refs.uForm.validate().then(async res => {
					this.formData.fourteen = this.formData.fourteen.join(',')
					this.formData.fifteen = this.formData.fifteen.join(',')
					this.formData.sixteen = this.formData.sixteen.join(',')
					this.formData.seventeen = this.formData.seventeen.join(',')
					this.formData.eighteen = this.formData.eighteen.join(',')
					console.log(this.formData);
					const data = await uni.$http.post('/business/questionnaire', this.formData)
					uni.$u.toast('提交成功')
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1 //返回层数，2则上上页
						});
					},1500)
				}).catch(errors => {
					uni.$u.toast('有选项为空！')
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		margin-bottom: 8rpx;
		color: #000000;
		font-weight: 700;
	}

	::v-deep .u-form {
		margin: 32rpx;

		.u-form-item__body {
			padding-bottom: 4rpx !important;
		}
	}

	::v-deep .u-input {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	// 文本域高度
	::v-deep .u-textarea__field {
		height: 420rpx !important;
	}

	.button {
		margin: 0 32rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: #16c1db;
		margin-left: 32rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 140rpx;
		font-weight: 400;
		color: #ebfcff;
	}
</style>